<template>
  <div class="theme-switcher">
    <n-popover trigger="click" placement="bottom">
      <template #trigger>
        <n-button quaternary circle class="theme-btn">
          <n-icon size="18">
            <Settings />
          </n-icon>
        </n-button>
      </template>
      <div class="p-4 w-60">
        <div class="mb-4">
          <div class="text-text-primary mb-2 font-medium">外观模式</div>
          <n-switch :value="isDark" @update:value="toggleDarkMode">
            <template #checked>
              <n-icon size="14" class="mr-1">
                <Moon />
              </n-icon>
              <span>暗色</span>
            </template>
            <template #unchecked>
              <n-icon size="14" class="mr-1">
                <Sunny />
              </n-icon>
              <span>亮色</span>
            </template>
          </n-switch>
        </div>

        <div>
          <div class="text-text-primary mb-2 font-medium">主题色</div>
          <div class="flex flex-wrap gap-2">
            <div
              v-for="(color, key) in themeColors"
              :key="key"
              class="w-6 h-6 rounded-full cursor-pointer border-2 transition-all"
              :class="{
                'scale-110 border-primary': themeColor === key,
                'border-transparent hover:scale-105': themeColor !== key,
              }"
              :style="{ backgroundColor: color }"
              @click="setThemeColor(key)"
            ></div>
          </div>
        </div>
      </div>
    </n-popover>
  </div>
</template>

<script setup lang="ts">
import { Settings, Moon, Sunny } from "@vicons/ionicons5";
const { isDark, themeColor, toggleDarkMode, setThemeColor, themeColors } =
  useTheme();
</script>

<style scoped>
.theme-btn {
  transition: all 0.3s ease;
}

.theme-btn:hover {
  transform: rotate(30deg);
}

/* 确保图标在暗色模式下可见 */
:deep(.n-icon) {
  color: var(--text-primary) !important;
}

/* 确保弹出窗口中的文本在暗色模式下可见 */
:deep(.n-popover) {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}
</style>
